<%--
  Created by IntelliJ IDEA.
  User: 小川
  Date: 2021/1/20
  Time: 8:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

        layui.use(['layer','table','form','upload'],function () {
            var  layer=layui.layer;
            var table=layui.table;
            var form=layui.form;
            var upload=layui.upload;

            upload.render({
                elem:'#upload',
                url:'upload',
                choose: function(obj){
                    obj.preview(function(index, file, result){
                        $('#preview').attr('src', result); //图片链接（base64）
                    });
                },
                //上传成功之后执行的方法
                done: function(res) {
                    //对全局变量进行赋值，等后边表单提交的时候把值传给后台
                    var img1=$("<img/>").prop("src","upload/"+res.path);
                    $("#preview").append(img1);
                    document.getElementById("preview1").value = res.path;
                }

            });


            var tabins=table.render({
                elem:'#brandtable',
                height:400,
                url:'/brand/list',
                page:true,
                limit:2,
                limits:[2,4,6],
                cols:[[
                    {checkbox:true},
                    {field:"id",title:"产品编号"},
                    {field:"name",title:"品牌名称"},
                    {field:"logo",title:"logo",templet:'<div><img src="{{d.logo}}" width="80px" height="29px"></div>'},
                    {field:"discription",title:"品牌描述"},
                    {field:"url",title:"官方url"},
                    {field:"status",title:"状态"},
                    {title:"操作",toolbar:'#toolbar1'}
                ]]
            });

            $("#addBrandBtn").click(function () {
                layer.open({
                    type:1,
                    title:'增加用户',
                    area:['500px','400px'],
                    content:$("#addBrandDiv")
                })
            })




            
            form.on('submit(addBrandFilter)',function (data){
                $.ajax({
                    type:"post",
                    url:"/brand/save",
                    data:$("#addbrandForm").serialize(),//再把拼接的数据从这儿传到后台去做添加
                    success:function (resp) {//回调方法,服务器成功返回数据，这个方法就执行
                        $("#addbrandForm")[0].reset();//将jquery对象转换成dom对象,完成重置功能
                        layer.closeAll();//关闭打的所有对话框架
                        //1.刷新table  重载这个表格中的数据
                        tabins.reload();
                        layer.msg(resp.msg)
                    },
                    error:function () {
                        console.info("增添错误")
                    }
                });
                return false;
            });

            table.on('tool(brandTablefilter)',function (data) {
                if (data.event=='del'){
                    var userId=data.data.id;
                    $.get("/brand/delete/"+userId,{},function (resp) {
                        tabins.reload();
                        layer.msg(resp.msg)
                    })
                }else {
                   if(data.event=='edit'){
                       var brandId=data.data.id;
                       $.get("brand/find/"+brandId,{},function (resp) {
                           form.val("updBrandfromFilter",{
                               "name":resp.name,
                               "logo":resp.logo,
                               "discription":resp.discription,
                               "url":resp.url,
                               "status":resp.status
                           })
                           $("#img1").prop("src",resp.logo)
                       })


                       layer.open({
                           type:1,
                           title:'修改用户',
                           area:['500px','400px'],
                           content:$("#updBrandDiv")
                       })

                    }
                }
            })

            $("#delUserBtn").click(function () {
                var userIds=[];
                var checkStatus=table.checkStatus('usertable');
                    $.each(checkStatus.data,function (index,item) {
                    userIds.push(item.id);
                });
                if (userIds.length>0){
                    $.get("/user/dels?ids="+userIds,{},function (resp) {
                        tabins.reload();
                        layer.msg(resp.msg);
                    })
                }else {
                    layer.msg("请选择要删除的行！")
                }
            })

            form.on('submit(updBrandFilter)',function (data) {
                //提交表单中的数据
                $.ajax({
                    type:"post",
                    url:"brand/update",
                    data:$("#updbrandForm").serialize(),
                    success:function (res) {
                        //1.reload
                        tabins.reload();
                        //2.关闭对话框架
                        layer.closeAll();
                        //3.清空表单内容
                        $("#updbrandForm")[0].reset();
                        //4.显示修改成功信息
                        layer.msg(res.msg);
                    }
                });
            });

            form.on('submit(querybrandFilter)',function (data) {
                //url  "user/list"
                tabins.reload({
                    where :{
                        //name请求参数名称  请求参数的值
                        name:data.field.name,
                        status:data.field.status
                    },
                    method:'post',
                    page:{
                        curr:1
                    }
                });
                return false;
            });





        })
    </script>
</head>
<body>


<button class="layui-btn layui-btn-radius  layui-btn-warm" id="addBrandBtn">增加用户</button>
<button class="layui-btn layui-btn-radius  layui-btn-warm" id="delUserBtn">删除用户</button>
<br/>
<form class="layui-form" id="querybrandForm">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入用名称" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status">
                <option value=" "></option>
                <option value="0">停售</option>
                <option value="1">在售</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="querybrandFilter">立即查询</button>
        </div>
    </div>
</form>
    <table id="brandtable" lay-filter="brandTablefilter">

    </table>

<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%--<script type="text/html" id="imgtmp">
 <img src="{{d.logo}}" style="height: 100px;width: 100px">
</script>--%>


<div class="layui-container" style="display: none;width: 500px" id="addBrandDiv">
    <h2>增加一个用户</h2>
    <form class="layui-form" id="addbrandForm">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌logo</label>
            <div class="layui-input-block">
            <div style="width:90px;height:90px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                <input type="hidden" name="logo" id="preview1"/>
                <img style="max-width: 80px;max-height:80px;" id="preview">
            </div>
            <button type="button" class="layui-btn layui-btn-xs" id="upload" >
            <i class="layui-icon">&#xe67c;</i>浏览
             </button>
        </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌描述</label>
            <div class="layui-input-block">
                <input type="text" name="discription" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">官方网站</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌的状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="在售" checked>
                <input type="radio" name="status" value="0" title="停售" >
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addBrandFilter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div class="layui-container" style="display: none;width: 500px" id="updBrandDiv">
    <h2>修改一个用户</h2>
    <form class="layui-form" id="updbrandForm" lay-filter="updBrandfromFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入品牌名称" autocomplete="ture" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌logo</label>
            <div class="layui-input-block">
                <div style="width:90px;height:90px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                    <input type="hidden" name="logo"/>
                    <img id="img1" style="max-width: 80px;max-height:80px;" src="" >
                </div>
                <button type="button" class="layui-btn layui-btn-xs" >
                    <i class="layui-icon">&#xe67c;</i>浏览
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">品牌描述</label>
            <div class="layui-input-block">
                <input type="text" name="discription" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">官方网站</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌得状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="在售" >
                <input type="radio" name="status" value="0" title="停售" >
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updBrandFilter">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


</div>



</body>
</html>
